<template>
  <div class="part1">
    <h1>vue语法</h1>
    <h2>v-if和v-show</h2>
    <button @click="show= !show">切换show</button>
    <p>v-show是根据display属性判断是否显示dom节点会一直存在</p>
    <p v-show="show">show</p>
    <br>
    <button @click="If= !If">切换if</button>
    <p>v-if涉及到dom的添加和移除比较耗费性能</p>
    <p v-if="If">if</p>
    <h2>v-for 循环</h2>
    <p>v-for () in arr</p>
    <ul>
      <li v-for="(num,key,index) in list" :key="index">num:{{num}} key:{{key}} index:{{index}}</li>
    </ul>

    <p>v-for () of arr</p>
    <ul>
      <li v-for="(num,key,index) of list" :key="key">num:{{num}} key:{{key}} index:{{index}}</li>
    </ul>

    <p>v-for="(item,key,index) in obj</p>
    <ul>
      <li v-for="(item,key,index) of listObj" :key="index">item:{{item}};index:{{index}};key:{{key}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "part1",
  data() {
    return {
      show: false,
      If: false,
      list: [1, 2, 3],
      listObj: {
        name: "mpf",
        age: 18,
        gender: "man"
      }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  padding: 0;
}
li {
  margin: 0 10px;
}
</style>
